<template>
  <div class="login-box">
    <div class="header-image" @click="selectHeadImg">
      <img :src="headImg" alt="头像" />
    </div>
    <div class="login" v-show="!isRegister">
      <van-form @submit="login">
        <van-field
          v-model="username"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
      <div class="other-operation">
        <span @click="registerAccount">用户注册</span>
        <span @click="lostPassword">忘记密码</span>
      </div>
    </div>
    <div class="register" v-show="isRegister">
      <van-form @submit="register">
        <van-field
          v-model="nickname"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          v-model="username"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
    <van-popup v-model="showPopup" position="bottom" :style="{ height: '30%' }">
      <van-image
        @click="selectHead(header)"
        v-for="header in headers"
        :key="header.index"
        width="50"
        height="50"
        :src="header.url"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import api from '@/fetch/api.js'
// import mockBooks from '@/mock/books.json'
export default {
  data () {
    return {
      showPopup: false,
      headers: [],
      isRegister: false,
      username: '',
      password: '',
      nickname: '',
      headImg: 'https://leven-test-bucket.nos-eastchina1.126.net/reader/bird.png'
    }
  },
  methods: {
    ...mapMutations([
      'RECORD_TOKEN'
    ]),
    login () {
      let data = {
        password: this.password,
        phoneNumber: this.username
      }
      api.userLogin(data).then(resp => {
        console.log(resp)
        this.RECORD_TOKEN(resp.data.data)
        this.$router.go(-1)
      }).catch(error => {
        console.log(error)
      })
    },
    register () {
      let data = {
        password: this.password,
        phoneNumber: this.username,
        nickname: this.nickname,
        headImg: this.headImg
      }
      api.userRegister(data).then(resp => {
        console.log(resp)
        this.isRegister = false
      }).catch(error => {
        console.log(error)
      })
    },
    registerAccount () {
      this.isRegister = true
    },
    lostPassword () {
      // TODO 需要完善
      console.log('lost password click')
    },
    selectHeadImg () {
      this.showPopup = true
      if (this.isRegister && this.headers.length === 0) {
        api.userHeaders().then(resp => {
          console.log(resp)
          this.headers = resp.data.data
        }).catch(error => {
          console.log(error)
        })
      }
    },
    selectHead (header) {
      this.headImg = header.url
      this.showPopup = false
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~@/styles/index.less";
@import "~@/styles/variable.less";
.login-box {
  background-color: white;
}
</style>
